<!DOCTYPE html>
<html lang="en">
<head>
    <!--收费管理-> 3,费用催缴-->
    <meta charset="UTF-8">
    <title>费用催缴</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <style>

        table{
            text-align: center;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-flow: column;
        }
        .loading {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 5px solid #BEBEBE;
            border-left: 5px solid #498aca;
            animation: load 1s linear infinite;
        }
        @keyframes load {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1  style="font-weight: bolder;text-shadow:5px 5px 5px burlywood ">首页>收费管理>费用催缴</h1>
        </div>
    </div>

<!-- 点击发送短信-->
    <div class="row">
        <div class="col-md-12">
            <button class="glyphicon glyphicon-jpy btn btn-primary" id="buton" >点击发送短信</button>
        </div>
    </div>
    <div class="loading" hidden id="jiazai" style="position: absolute;left: 50%;top: 32%"></div>
    <div class="row" style="overflow: scroll;height:800px;">
        <div  class="col-md-12">
            <table style="table-layout: fixed"  class="table table-hover table-striped table-bordered" id="tableone2">
                <tr style="position: sticky;top:0;z-index: 999;font-weight: bolder;font-size: larger">
                    <td>编号</td>
                    <td>姓名</td>
                    <td>房间号</td>
                    <td>费用名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>费用</td>
                    <td>账单日</td>
                    <td>手机号</td>
                    <td>催缴次数/次</td>
                </tr>
            </table>
        </div>
        <div class="col-md-12" style="text-align: center">
            共<span id="shujusum"></span>条数据
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    /**
     * 加载全部数据
     */
    $.ajax({
        url:"getallfeiyongcuijiao",
        type:"get",
        dataType:"json",
        success:function (data){
            $("#shujusum").html(data.length)
            for(let obj of data){
                add(obj)
            }
        }
    });

    /**
     * 加载组件并赋值
     */
    function add(obj){
        let tr =  document.createElement("tr");
        let td1 =  document.createElement("td");
        td1.innerText=obj.D_id
        let td2 =  document.createElement("td");
        td2.innerText=obj.Hname
        let td3 =  document.createElement("td");
        td3.innerText=obj.vname+obj.ttname+obj.Uname+obj.honame
        let td4 =  document.createElement("td");
        td4.innerText=obj.S_Name
        let td5 =  document.createElement("td");
        td5.innerText=obj.S_money
        let td6 =  document.createElement("td");
        td6.innerText=obj.D_sum
        let td7 =  document.createElement("td");
        td7.innerText=obj.summoney
        let td8 =  document.createElement("td");
        td8.innerText= obj.D_billdate.year+"-"+obj.D_billdate.monthValue+"-"+obj.D_billdate.dayOfMonth
        let td9 = document.createElement("td");
        td9.innerText=obj.Htel
        $(td9).attr("name","shouji")
        $(td9).val(obj.D_id)
        let td10 = document.createElement("td");
        td10.innerText=obj.D_count
        $(tr).append(td1,td2,td3,td4,td5,td6,td7,td8,td9,td10)
        $("#tableone2").append(tr)
    }



    /**
     * 点击发送
     */
    $("#buton").on("click",function(){
        $("#jiazai").get(0).removeAttribute("hidden")
        setTimeout(function(){
        $("#jiazai").attr("hidden","true")
        let ia = 0;
        let tels= document.getElementsByName("shouji")
        let i = tels.length
        let arr = new Array(i)
       for(let a = 0;a<i;a++){
           arr[a]=tels[a].innerText;
       }

            $.ajax({
                url:"fasongduanxing",
                type: "post",
                dataType: "json",
                transaction:true,
                data:{arr:arr},
                success:function(data){
                    if(data){
                     succ("发送成功")
                    }else {
                        Dialogs("发送失败","red")
                    }
                }
            });
        }, 3000);
    });

    function Dialogs(text,color){
        layer.open({
            content: '执行结果:'+text.fontcolor(color)
            ,offset:'100px'
            ,time:'3000'
            ,success:function(layero, index) {
                var timeNum = this.time/1000, setText = function(start){
                    layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
            }
        });
    };

    function succ(mags){
        layer.confirm('执行结果： '+mags.fontcolor("green"), {
                offset: '100px'
                , btn: ['确定'] //按钮
            }, function(){
                window.location.reload()
            }
        );
    }
</script>
</html>